<template>
	<view class="com_view">
		<view class="icon_box" @click="helpShow=true">
			<image src="@/static/icons/help.png" mode=""></image>
		</view>
		<scroll-view scroll-x="true" scroll-y="true" class="scroll_box">
			<view class="scroll_content">
				<!-- 表头 -->
				<view class="table_header">
					<view class="header_cell" v-for="header in tableHeader" :key="header.title"
						:style="`--childer-num:${header.num}`" :class="header.class + ' ' + header.bg">
						<text>{{ header.title }}</text>
						<view class="header_childers">
							<view class="header_childer" v-for="child in header.childer" :key="child.title">
								<text> {{ child.title }} </text>
							</view>
						</view>
					</view>
				</view>

				<!-- 表格内容 -->
				<view class="table_content">
					<view v-for="(row, index) in tableList" :key="row.id">
						<!-- 		<view class="table_row">
						<view class="table_cell" v-for="(item,hederIndex) in tableKey" :key="item.title"
							@click="setSort(row, item.key, index)"
							:class="[`${item.class}`, `${isSubmit&&item.type!=='text'&&!row[item.key]? 'no_fill':''}`]">
							<text v-if="item.type==='text'">{{ row[item.key] }}</text>
							<text v-if="item.type==='text'" class="text_tip">{{ getIndex(row, index) }}</text> 
							<view class="options_line" v-else>
								<text class="option_cell" v-for="(option,optionIndex) in item.options" :key="option.value"
									:class="{'is_select_options': row[item.key] == option.value }"
									@click.stop="selectOption( row, item, option.value ,index,optionIndex,hederIndex)">
									{{ option.label }}
								</text>
							</view> 
						</view>
					</view> -->


						<view class="table_row">
							<!-- <view class="table_cell" v-for="(item,hederIndex) in tableKey" :key="item.title"
								@click="setSort(row, item.key, index)" -->
							<view class="table_cell" v-for="(item,hederIndex) in tableKey" :key="item.title"
								:class="[`${item.class}`, `${isSubmit&&item.type!=='text'&&!row[item.key]? '':''}`]">
								<text v-if="item.type==='text'">{{ row[item.key] }}</text>
								<!-- <text v-if="item.type==='text'" class="text_tip">{{ getIndex(row, index) }}</text> -->

								<view class="options_line" v-else>
									<text class="option_cell" v-for="(option,optionIndex) in item.options"
										:key="option.value"
										:class="{'is_select_options': row[item.key] == option.value }"
										@click.stop="selectOption( row, item, option.value ,index,optionIndex,hederIndex)">
										{{ option.label }}
									</text>
								</view>
							</view>
						</view>

						<!-- 质量排序单行 -->
						<view class="add_line" v-if="(index + 1) % 2 === 0">
							<view class="add_line_title">
								<text>质量排序</text>
							</view>
							<view :class="['add_line_value',!row.qualitySorting&&isSubmit?'no_fill':'']"
								style="height: 100%;">
								<!-- <u--input placeholder="请输入您认为的排序" border="surround"
								type="textarea" @blur="submitLine" :disabled="already" style="width: 100%;"
								 v-model="qualitySorting" ></u--input> -->
								<view @click.stop="setSort(row,'',index)" v-if="!row.qualitySorting"
									style="width: 100%;height: 100%;display: flex;align-items: center;">
									<text v-if="!row.qualitySorting"
										style="    color: rgb(192, 196, 204);padding-left: 5rpx;height: 100%;min-height: 50px;display: flex;align-items: center;">
										点击进行排序
									</text>
									<text v-else  >{{row.qualitySorting}} </text>
									<!-- <u--input placeholder="点击进行排序" border="surround" type="textarea" :disabled="true"
										style="width: 100%;" v-model="row.qualitySorting"
										v-if="!row.qualitySorting"></u--input> -->
								</view>

								<view v-else style="display: flex;align-items: center;width: 100%;height: 100%;">
									<text >{{row.qualitySorting.split(!row.sortSymbol?'>':row.sortSymbol)[0]}}</text>

									<text @click="selectSymbol(row)"
										style="background-color: #fff;padding: 2rpx;color: #999;">{{!row.sortSymbol?'点击选择':row.sortSymbol}}</text>


									<text>{{row.qualitySorting.split(!row.sortSymbol?'>':row.sortSymbol)[1]}}</text>

								</view>




							</view>
						</view>

						<!-- 整体质量描述单行 -->
						<view class="add_line" v-if="(index + 1) % 2 === 0">
							<view class="add_line_title">
								<text>整体质量风格描述</text>
							</view>
							<view class="add_line_value">
								<u--input placeholder="请输入整体质量风格描述" border="surround" style="width: 100%;"
									type="textarea" @blur="submitLine(row)" :disabled="already"
									v-model="row.styleDescription"></u--input>

							</view>
						</view>


					</view>
				</view>

			</view>
		</scroll-view>

		<view class="submit-line">
			<u-button :text="already? '已提交':'提交'" type="success" class="btn" @click="submitContrastSortFn"
				:disabled="already"></u-button>
		</view>

		<u-toast ref="uToast"></u-toast>

		<u-modal :show="helpShow" title="对比排序" width="400px" @confirm="helpShow=false" @close="helpShow=false">
			<view class="help_box">
				<view class="help_line">
					1、<text>以下数据均为必填项。</text>
				</view>
				<view class="help_line">
					2、<text>在评价的各项指标中，两个样品进行比较，你认为哪个指标好，在其对应的空格中划“”，其中，劲头、浓度增大划“十”，指标没有明显变化的在对应的空格中均划“0”。</text>
				</view>
				<view class="help_line">
					3、<text>对两个样品总体质量做出评价，点击品牌名称并对两个样品整体质量进行排序。</text>
				</view>

			</view>
		</u-modal>

		<!-- 提交前的提示 -->
		<u-modal :show="submitShow" title="提交确认" width="300px" content="数据提交后将无法进行修改，您确定要提交吗？" :showCancelButton="true"
			@cancel="submitShow=false" @confirm="submitConfirm" @close="submitClose"></u-modal>
		<!-- 选择符号弹框 -->
		<u-modal :show="symbolShow" title="请选择" width="400px" @confirm="symbolShow=false" confirmText="关闭"
			@close="symbolShow=false">
			<view class="symbol_box">
				<text @click="enterSymbol('<')">
					< </text>
						<text @click="enterSymbol('=')"> = </text>
						<text @click="enterSymbol('>')"> > </text>

			</view>
		</u-modal>


	</view>
</template>

<script>
	import {
		getContrastSortAPI,
		updataContrastSortAPI,
		submitContrastSortAPI
	} from '@/api/tPoint.js'
	const Header = [{
			title: '品牌',
			childer: [],
			num: 1,
			class: 'no_class',
			bg: 'no_bg'
		},
		{
			title: '香气特性',
			childer: [{
				title: "香气质"
			}, {
				title: "香气量"
			}, {
				title: "透发性"
			}, {
				title: "杂气"
			}],
			num: 4
		},
		{
			title: '烟气特性',
			childer: [{
				title: "浓度"
			}, {
				title: "劲头"
			}, {
				title: "细腻程度"
			}, {
				title: "成团性"
			}],
			num: 4
		},
		{
			title: '口感特性',
			childer: [{
				title: "刺激性"
			}, {
				title: "干燥感"
			}, {
				title: "甜度"
			}, {
				title: "余味"
			}],
			num: 4
		},
	]
	const HeaderDict = [{
			title: '品牌',
			key: 'smokeName',
			type: 'text',
			class: 'no_class'
		},
		{
			title: '香气质',
			key: 'aromaQuality',
			type: 'options',
			options: [{
				label: '√',
				value: '√'
			}, {
				label: '0',
				value: '0'
			}]
		},
		{
			title: '香气量',
			key: 'aromaVolume',
			type: 'options',
			options: [{
				label: '√',
				value: '√'
			}, {
				label: '0',
				value: '0'
			}]
		},
		{
			title: '透发性',
			key: 'transdermal',
			type: 'options',
			options: [{
				label: '√',
				value: '√'
			}, {
				label: '0',
				value: '0'
			}]
		},
		{
			title: '杂气',
			key: 'impure',
			type: 'options',
			options: [{
				label: '√',
				value: '√'
			}, {
				label: '0',
				value: '0'
			}]
		},
		{
			title: '浓度',
			key: 'density',
			type: 'options',
			options: [{
				label: '+',
				value: '+'
			}, {
				label: '0',
				value: '0'
			}]
		},
		{
			title: '劲头',
			key: 'energy',
			type: 'options',
			options: [{
				label: '+',
				value: '+'
			}, {
				label: '0',
				value: '0'
			}]
		},
		{
			title: '细腻程度',
			key: 'delicacyLevel',
			type: 'options',
			options: [{
				label: '√',
				value: '√'
			}, {
				label: '0',
				value: '0'
			}]
		},
		{
			title: '成团性',
			key: 'clustering',
			type: 'options',
			options: [{
				label: '√',
				value: '√'
			}, {
				label: '0',
				value: '0'
			}]
		},
		{
			title: '刺激性',
			key: 'thrill',
			type: 'options',
			options: [{
				label: '√',
				value: '√'
			}, {
				label: '0',
				value: '0'
			}]
		},
		{
			title: '干燥感',
			key: 'dryFeeling',
			type: 'options',
			options: [{
				label: '√',
				value: '√'
			}, {
				label: '0',
				value: '0'
			}]
		},
		{
			title: '甜度',
			key: 'sweetness',
			type: 'options',
			options: [{
				label: '√',
				value: '√'
			}, {
				label: '0',
				value: '0'
			}]
		},
		{
			title: '余味',
			key: 'aftertaste',
			type: 'options',
			options: [{
				label: '√',
				value: '√'
			}, {
				label: '0',
				value: '0'
			}]
		},
	]
	export default {
		name: 'contrastRank',
		props: {
			id: {
				type: [String, Number],
				default: 0
			},
			already: { //是否已提交
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				tableList: [], //列表数据
				styleDescription: "", //整体风格的描述
				qualitySorting: "", //存储质量排序
				sortList: [], //排序的顺序
				isSubmit: false, //是否点击过提交按钮
				helpShow: false, // 帮助的提示
				submitShow: false, // 提交前的提醒
				timer2: null, //循环获取填写的数据
				live: true, //表明页面还存活着

				isqualitySorting: false,
				symbolShow: false,
				symbolRow: []
			}
		},
		computed: {
			// 表头的上级
			tableHeader() {
				return Header
			},
			// 表头的字典项
			tableKey() {
				return HeaderDict
			},
		},
		watch: {
			already(nv, ov) {
				console.log("already", nv)
				if (nv) {
					if (this.timer2) {
						clearTimeout(this.timer2)
					}
				}
			}
		},
		mounted() {
			if (this.already) {
				if (this.timer2) {
					clearTimeout(this.timer2)
				}
				this.repeatGetData()
			} else {
				this.getData()
			}
		},
		beforeDestroy() {
			if (this.timer2) {
				clearTimeout(this.timer2)
			}
		},
		methods: {
			enterSymbol(val) {



				console.log(val);
				console.log(this.symbolRow);
				// this.symbolRow.qualitySorting = !this.symbolRow.sortSymbol?'优于':row.sortSymbol)[1]
				let sortArr = this.symbolRow.qualitySorting.split(!this.symbolRow.sortSymbol ? '优于' : this.symbolRow
					.sortSymbol)
				console.log(sortArr);
				this.symbolRow.qualitySorting = sortArr.join(val)
				this.symbolRow.sortSymbol = val


				console.log(this.symbolRow.qualitySorting);
				this.updataContrastSortFn(this.symbolRow)

				this.symbolShow = false
			},
			selectSymbol(row) {
				if (this.already) {
					return false
				}
				this.symbolRow = row
				this.symbolShow = true
			},

			// 循环获取数据
			async repeatGetData() {
				this.timer2 = setTimeout(() => {
					this.repeatGetData()
				}, 1000 * 5)
				const res = await getContrastSortAPI({
					allId: this.id,
					loading: false
				})

				if (res.code !== 200) return;
				this.tableList = res.data || []
			},

			// 手动设置排序
			setSort(row, key, index) {
				console.log(row, key, index);
				// if (this.already || key != 'smokeName') return;
				if (this.already) return;
				let from = row //修改的表单
				let sort = ""
				if ((index + 1) % 2 === 0) { //点击为为偶数位
					console.log("点击的偶数位")
					// sort = `${ row.smokeName } > ${this.tableList[index - 1].smokeName}`
					sort = `${this.tableList[index - 1].smokeName} > ${ row.smokeName }`
				} else { //点击位为奇数位
					console.log("点击的奇数位")
					sort = `${ row.smokeName } > ${this.tableList[index + 1].smokeName}`
					from = this.tableList[index + 1]
				}
				from.qualitySorting = sort
				from.sortSymbol = '>'
				
			 
				
			 
				this.updataContrastSortFn(from)

			},
			// 获取下标
			getIndex(row, index) {
				// let num = ""
				// this.sortList.forEach((ele,index)=>{
				// 	if(ele==row.smokeName) {
				// 		num = index + 1
				// 	}
				// })
				// return num
				let from = row

				if ((index + 1) % 2 !== 0) { //奇数行
					console.log(index)
					from = this.tableList[index + 1]
				}

				let sort = from.qualitySorting || ""
				let smokeName = row.smokeName || ""

				if (smokeName === "" || sort == "") {
					return ""
				}
				if (sort.indexOf(smokeName) === 0) {
					return "优"
				} else {
					return ""
				}

			},
			// 选择选项
			selectOption(row, item, value, index, optionIndex, hederIndex) {
				console.log('row', row);
				console.log(' item', item);
				console.log('value', value);
				console.log('index', index);
				console.log('optionIndex', optionIndex);
				console.log('hederIndex', hederIndex);
				if (this.already) {
					return;
				}


				// if (value == '√') {
				// 		console.log(this.tableKey);
				// }






				row[item.key] = value
				this.updataContrastSortFn(row)
			},
			// // 选择选项
			// selectOption(line, cell, value) {
			// 	console.log('line, cell, value',line, cell, value);
			// 	if (this.already) {
			// 		return;
			// 	}
			// 	line[cell.key] = value
			// 	this.updataContrastSortFn(line)
			// },

			/** 更新对比排序 */
			async updataContrastSortFn(form) {
				const res = await updataContrastSortAPI({
					...form,
					loading: false
				})
				console.log("更新的结果为", res)
			},

			// 获取基础数据
			async getData() {
				const res = await getContrastSortAPI({
					allId: this.id
				})
				console.log("getContrastSortAPI", res)
				if (res.code !== 200) return;
				this.tableList = res.data || []
			},

			/** 整体评价的输入框失焦，进行提交*/
			submitLine(from) {
				console.log(from);
				console.log(this.styleDescription);
				console.log(this.tableList);
				// if(!this.styleDescription) return;
				console.log(from.styleDescription)
				if (!from.styleDescription) {
					from.styleDescription = '-'
				}
				if (this.tableList.length < 1) return;
				// const line = this.tableList[0]
				console.log(from.styleDescription)
				this.updataContrastSortFn(from)
			},

			submitClose() {
				this.submitShow = false
			},

			async submitConfirm() {
				// return false
				this.submitShow = false
				const res = await submitContrastSortAPI(this.id)
				console.log("提交的结果为", res)
				if (res.code != 200) {
					console.log("提交失败")
					return
				}
				this.$refs.uToast.show({
					type: 'success',
					icon: false,
					title: '提示',
					message: "提交成功",
				})
				this.$emit('c_submit', '对比排序');

			},

			// 整体 提交
			async submitContrastSortFn() {
				this.isSubmit = true
				// if(this.tableList.length != this.sortList.length) {
				// 	this.$refs.uToast.show({
				// 		type: 'warning',
				// 		icon: false,
				// 		title: '提示',
				// 		message: "请检查排序是否全部排序完成",
				// 	})
				// 	return
				// }

				if (!this.isOver()) {
					return this.$refs.uToast.show({
						type: 'warning',
						icon: false,
						title: '提示',
						message: "请检查数据是否填写完成",
					})
				}

				this.submitShow = true

			},

			// 校验是否填完
			isOver() {
				let loop = true
				try {

					let qualNum = 0
					this.tableList.forEach(line => {

						if (!line.qualitySorting) {
							qualNum += 1
							console.log(line);
							console.log(this.tableList);
						}
						// HeaderDict.forEach(ele => {

						// 	if (!line[ele.key]) {
						// 		throw new Error("存在未填完数据")
						// 	}
						// })
					})

					console.log(qualNum);
					console.log(this.tableList.length / 2);

					let isTrue = qualNum == this.tableList.length / 2

					console.log(isTrue);
					if (!isTrue) {


						return false
					}

					console.log(111111111);

				} catch (e) {
					//TODO handle the exception
					if (e.message === "存在未填完数据") {
						return false
					} else {
						console.log(e.message)
					}
				}
				// !this.styleDescription||
				// if(!this.qualitySorting) return false;

				return true;

			}

		}
	}
</script>

<style scoped lang="scss">
	.com_view {
		width: 100%;
		// flex: 1;
		height: 500px;
		padding: 20px;
		padding-top: 0;
		position: relative;
		--def-cell-width: 92px;
		--def-table-bg: rgb(245, 247, 250);
		--def-border-color: #ddd;
	}

	.icon_box {
		position: absolute;
		top: 0px;
		right: 0px;
		z-index: 9;
		transform: translate(-70%, -120%);

		image {
			--hlep-icon-size: 26px;
			width: var(--hlep-icon-size);
			height: var(--hlep-icon-size);
		}
	}

	.help_box {

		.help_line {
			display: flex;
			line-height: 24px;
		}
	}

	.submit-line {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;

		.btn {
			width: 100px;
			background-color: #16b777;
		}
	}

	.scroll_box {
		width: 100%;
		height: calc(100% - 70px);

		.scroll_content {
			min-width: 100%;
			min-height: 100%;
			position: relative;
			width: max-content;
			background-color: var(--def-table-bg);

			.no_class {
				width: 250px;
				position: sticky;
				z-index: 2;
				left: 1px;
				background-color: var(--def-table-bg);
			}

			.no_bg {
				background-image: url(@/static/Maskgroup.png);
			}

			.no_fill {
				background-color: rgba(200, 16, 46, 0.5);
			}
		}
	}

	.table_header {
		display: flex;
		align-items: center;
		width: max-content;
		background-image: url(@/static/Maskgroup.png);
		position: sticky;
		top: 0;
		z-index: 3;
		border-bottom: 1px solid var(--def-border-color);
		border-left: 1px solid var(--def-border-color);

		.header_cell {
			flex-shrink: 0;
			height: 100px;
			line-height: 50px;
			width: calc(var(--childer-num) * var(--def-cell-width));
			border-right: 1px solid var(--def-border-color);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.header_childers {
			display: flex;
			align-items: center;
			border-top: 1px solid var(--def-border-color);

			.header_childer {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: var(--def-cell-width);
				border-right: 1px solid var(--def-border-color);
			}
		}
	}

	.table_content {
		width: max-content;
		min-width: 100%;
		background-color: rgb(245, 247, 250);

		.table_row {
			width: max-content;
			min-width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid var(--def-border-color);
			border-left: 1px solid var(--def-border-color);
		}

		.table_cell {
			width: var(--def-cell-width);
			height: 50px;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 1px solid var(--def-border-color);
		}

		.text_tip {
			display: block;
			position: absolute;
			right: 10px;
			top: 10px;
			color: #ff8037;
			font-size: 12px;
			font-weight: bold;
		}

		.options_line {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 100%;

			// padding: 0 5px;
			.option_cell {
				--size: 25px;
				display: block;
				height: var(--size);
				width: var(--size);
				line-height: var(--size);
				background-color: #fff;
				color: #1f1f1f;
				text-align: center;
			}

			.is_select_options {
				background-color: #16b777;
				color: #fff;
			}
		}
	}

	.add_line {
		width: 100%;
		min-height: 50px;
		display: flex;
		align-items: center;
		position: relative;
		border-bottom: 1px solid var(--def-border-color);
		border-left: 1px solid var(--def-border-color);

		.add_line_title {
			width: 250px;
			min-height: 50px;
			height: max-content;
			background-color: var(--def-table-bg);
			position: sticky;
			left: 1px;
			z-index: 2;
			border-right: 1px solid var(--def-border-color);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.add_line_value {
			flex: 1;
			padding-left: 20px;
		}
	}


	.u-input {
		background: transparent !important;
	}


	.symbol_box {
		padding: 10rpx 0;

		text {
			padding: 5rpx;
			background-color: #f5f7fa;
			margin: 8rpx 5rpx;
		}
	}
</style>